<template>
  <teleport to="#message">
    <div
      class="alert fixed-top w-25 mx-auto d-flex mt-4 justify-content-between"
      :class="classType"
      v-if="isShow"
    >
      <span>{{ message }}</span>
      <button
        type="button"
        class="btn-close"
        @click.prevent="handleClose"
      ></button>
    </div>
  </teleport>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import useCreateDom from '@/hooks/useCreateDom'
import { EMessageType } from '@/types'
export default defineComponent({
  name: 'Message',
  props: {
    type: {
      type: String,
      default: 'info'
    },
    message: {
      type: String,
      required: true
    }
  },
  emits: ['handleClose'],
  setup(props, { emit }) {
    useCreateDom('message')
    const classType = {
      'alert-primary': props.type === EMessageType.INFO,
      'alert-success': props.type === EMessageType.SUCCESS,
      'alert-danger': props.type === EMessageType.DANGER,
      'alert-warning': props.type === EMessageType.WARNING
    }
    const isShow = ref(true)
    const handleClose = () => {
      isShow.value = false
      emit('handleClose')
    }
    return {
      isShow,
      classType,
      handleClose
    }
  }
})
</script>
